<template>
	<!-- 主页的组件 -->
	<div class="common-layout" style="margin: 0px;background-color: #004ebc;">
		<el-container >
			<el-header style="height: 69px;background: #004ebc">

				<el-menu class="el-menu-demo" mode="horizontal" 
				background-color="#f12050" 
				text-color="white" 
				active-text-color="#004ebc"
				 style="width: 100%; margin:auto; min-width: 1200px; height: 70px; background: #004ebc;">
					<h1 style="width: 10%;">玩具店</h1>
					<el-menu-item index="1" v-if="admin == true">
						<RouterLink to='/' style='text-decoration: none;'>玩具</RouterLink>
					</el-menu-item>
					<el-menu-item index="18" v-if="admin == true">
						<RouterLink to='/Fenlei/2' style='text-decoration: none;'>分类</RouterLink>
					</el-menu-item>

					<el-menu-item index="6" v-if="admin == true">
						<RouterLink to='/Card' style='text-decoration: none;'>购物车</RouterLink>
					</el-menu-item>
					<el-menu-item index="5" v-if="admin == true">
						<RouterLink to='/Myself' style='text-decoration: none;'>个人中心</RouterLink>
					</el-menu-item>
					<el-menu-item index="13" v-if="user == true && admin == false">
						<RouterLink to='/LunboManage' style='text-decoration: none;'>主图</RouterLink>
					</el-menu-item>
					<el-menu-item index="8" v-if="user == true && admin == false">
						<RouterLink to='/TypeManage' style='text-decoration: none;'>玩具类别</RouterLink>
					</el-menu-item>
					<el-menu-item index="7" v-if="user == true && admin == false">
						<RouterLink to='/BooksManage' style='text-decoration: none;'>玩具</RouterLink>
					</el-menu-item>

					<el-menu-item index="9" v-if="user == true && admin == false">
						<RouterLink to='/UsersManage' style='text-decoration: none;'>用户</RouterLink>
					</el-menu-item>
					<el-menu-item index="10" v-if="user == true && admin == false">
						<RouterLink to='/OrdersManage' style='text-decoration: none;'>订单</RouterLink>
					</el-menu-item>



					<el-menu-item index="15" v-if="user == true && admin == false">
						<RouterLink to='/Admin' style='text-decoration: none;'>个人中心</RouterLink>
					</el-menu-item>

					<el-menu-item style="position: absolute;top: 0px;right: 0px;">
						<div v-if="show == true">
							<el-dropdown>
								<span class="el-dropdown-link" style="color: #ffffff;line-height: 58px;">
									欢迎{{users.uname}}登录
									<el-icon class="el-icon--right">
										<arrow-down />
									</el-icon>
								</span>
								<template #dropdown>
									<el-dropdown-menu v-if='users.role==0'>
										<el-dropdown-item @click='dingdan'>我的订单</el-dropdown-item>
									</el-dropdown-menu>
									<el-dropdown-menu v-if='users.role==0'>
										<el-dropdown-item @click='dizhi'>我的地址</el-dropdown-item>
									</el-dropdown-menu>
									<el-dropdown-menu v-if='users.role==0'>
										<el-dropdown-item @click='pingjia'>我的评价</el-dropdown-item>
									</el-dropdown-menu>
									<el-dropdown-menu v-if='users.role==0'>
										<el-dropdown-item @click='shoucang'>我的收藏</el-dropdown-item>
									</el-dropdown-menu>
									<el-dropdown-menu>
										<el-dropdown-item @click='zhuxiao'>注销</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>

						</div>

						<div v-else>
							<RouterLink to='/Login' style="text-decoration: none;">登录 </RouterLink>
							<RouterLink to='/Regist' style="text-decoration: none;">注册</RouterLink>
						</div>

					</el-menu-item>
				</el-menu>

			</el-header>

		</el-container>


	</div>

</template>

<script>
	import Axios from 'axios'
	import router from "../route/index.js"
	export default { //js中 es6语法，模块 导出
		name: 'App',
		data() {
			return {
				admin: true,
				user: true,
				users: {},
				drawer: true,
				show: false,
				input: ''
			}
		},
		created() {
			this.getUsers();
		},
		methods: {
			dizhi() {
				router.push('/Myaddress');
			},
			dingdan() {
				router.push('/Myorders');
			},
			shoucang() {
				router.push('/Shoucang');
			},
			pingjia() {
				router.push('/MyComments');
			},
			zhuxiao() {
				sessionStorage.removeItem('users');
				location.reload();
			},
			getUsers() {
				console.log('App---调用getUser')
				let str = sessionStorage.getItem('users')
				if (str != null) {
					this.show = true; //欢迎可见
					//把字符串转换成对象 --- sessionStorage存的必须时字符串，所以取出来的也是字符串
					this.users = JSON.parse(str);
					if (this.users.role == 1) {
						this.admin = false
					} else {
						this.user = false
					}
				}
			}
		}
	}
</script>

<style>
	.ms {
		text-decoration: none;
	}

	.common-layout {
		margin: 0px auto;
		width: 100%;
	}



	.el-menu {
		height: 70px;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}


	#txtTask {
		min-width: 15%;
	}

	h1 {
		font-size: 20px;
		color: #ffffff;
	}
</style>
